<template>
    <el-row class="serverHisFileSystemLoad">
        <el-col :span="24" class="serverHisFileSystemLoad-box ScaleCSSViewport_unzoom">
            <!-- <div 
                id="HisFileSystemLoad" 
                ref="HisFileSystemLoad" 
                class="HisFileSystemLoad"
                :class="{divHide: dataTotal == 0}">
            </div> -->
            <div 
                ref="HisFileSystemLoad"
                v-loading="!dataTotal"
                element-loading-text="无可用数据"
                element-loading-spinner="el-icon-warning-outline"
                element-loading-background="rgba(0, 0, 0, 0.8)">
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    props:{
        allData: Object
    },
    data() {
        return {
            dataTotal: 0,
            onData: '挂载点',
            usedData: [],
            timeData: [],
            HisFileSystemLoad: {},
            EChartsOption: {
                title: {
                    left: 'center',
                    text: '文件系统使用率'
                },
                grid: {
                    left: 'center',
                    top: 'middle',
                    width: '95%',
                    height: '70%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
					formatter:'{b}<br /> {a} {c}%'
                },
                xAxis: {
                    type: 'category',
                    data: this.timeData,
                }, 
                yAxis: {
                    type: 'value'
                }, 
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 100,
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: {
                    name: "文件系统使用率",
                    type: 'line',
                    // showSymbol: false,
                    data: this.usedData,
                }
            }
        }
    },
    created() {
        this.getTableData();
    },
    mounted() {
        
            this.HisFileSystemLoad = this.$echarts.init(this.$refs.HisFileSystemLoad);
            
            this.drawHisFileSystemLoad();
        window.onresize= () =>{
            let myEchart = this.$echarts.init(this.$refs.HisFileSystemLoad);
            myEchart.resize();
        }
    },
    computed: {
        
    },
    methods: {
        getTableData(){
            
            this.dataTotal = this.allData.dataTotal;
            this.timeData = this.allData.Time;
            this.usedData = this.allData.USED;
            //20210727
            //  this.timeData = this.allData.Time;
            // this.usedData = this.allData.USED;
            this.$nextTick(function () {
                this.HisFileSystemLoad.setOption({
                        xAxis: {
                            data: this.timeData
                        },
                        series: {
                            data: this.usedData
                        }
                });
            })
        },
        drawHisFileSystemLoad(){
            this.HisFileSystemLoad.setOption(this.EChartsOption);
        },
    },
    watch: {  
    　　allData: {  
    　　　　handler(newValue, oldValue) {
                this.getTableData();
    　　　　},  
    　　　　deep: true  
    　　}  
    }  
}
</script>
<style scoped>
.serverHisFileSystemLoad{
	height: 100%;
	margin-bottom: 0 !important;
}
.serverHisFileSystemLoad-box{
    height: 100%;
}
.serverHisFileSystemLoad-box div {
    height: 100%;
}

.divHide {
    display: none;
}

.noDataBox{
    height: 100%;
    text-align: center;
}
.noDataBox::before{
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}
.noDataBox span {
    font-size: xx-large;
}
</style>